<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0621-JS作业-键盘事件-螺旋</title>
	<style type="text/css">
		html {
			background-color: #666;
			font-family: "Microsoft YaHei";
		}
		body,ul{
			margin: 0;
		}
		ul{
			padding: 0;
			list-style: none;
		}
		.wrap{
			position: relative;
			width: 715px;
			height: 243px;
			margin: 50px auto;
		}
		.wrap .bgbox{
			width: 100%;
			height: 100%;
			background: url('images/bg1.gif') no-repeat center/cover;
		}
		.wrap .rolebox{
			position: absolute;
			bottom: 10px;
		}
		.wrap .text{
			margin-top: 5px;
			font-size: 14px;
			color: #fff;
		}
	</style>
</head>
<body>
	<section class="wrap">
		<div class="bgbox"></div>
		<div class="rolebox" style="left: 140px;">
			<img src="images/k0.gif">
		</div>
		<div class="text">
			按键说明：<br><br>
			移动：（需要按住按键）<br>
			左走：a &nbsp;&nbsp;|&nbsp;&nbsp;
			右走：d &nbsp;&nbsp;|&nbsp;&nbsp;
			跳起：w &nbsp;&nbsp;|&nbsp;&nbsp;
			蹲下：s &nbsp;&nbsp;|&nbsp;&nbsp;
			左闪： a a &nbsp;&nbsp;|&nbsp;&nbsp;
			右跑： d d &nbsp;&nbsp;|&nbsp;&nbsp;
			攻击：j<br><br>
			招式：（在1200毫秒内输入完成）<br>
			招式1： d j &nbsp;&nbsp;|&nbsp;&nbsp;
			招式2： s d j &nbsp;&nbsp;|&nbsp;&nbsp;
			招式3： s d s d j
		</div>
	</section>
</body>
<script>
	var oRole = document.getElementsByClassName('rolebox')[0],
		aKlist = [
			{key:'a',kCode:65,img:'k2'},
            {key:'d',kCode:68,img:'k1'},
            {key:'s',kCode:83,img:'k4'},
            {key:'w',kCode:87,img:'k5'},
            {key:'j',kCode:74,img:'k6'}
		],
		aSkill = [
            {key:'dj',kCode:[68,74],img:'k7'},
            {key:'sdj',kCode:[83,68,74],img:'k8'},
            {key:'sdsdj',kCode:[83,68,83,68,74],img:'k9'},
            {key:'dd',kCode:[68,68],img:'k3'},
            {key:'aa',kCode:[65,65],img:'k10'}
        ],
		aKcodeS = [],aKinput = [],dStep = 0,ready = true,sReady = true,
		dRole,num;

    document.addEventListener('keydown',fnKeyDw);
    document.addEventListener('keyup',fnKeyUp);
    
    function fnKeyDw(e){
        if(ready){
	        e = e || window.event;
	        if(aKcodeS[e.keyCode] === true){
	            return false;
	        }
            aKcodeS[e.keyCode] = true;
            aKinput.push(e.keyCode);
            // console.log(aKinput);
            ready = false;
            sReady = false;
            num = Math.random();
            switch (e.keyCode){
                case 65:
                    oRole.innerHTML = `<img src="images/${aKlist[0].img}.gif">`;
                    dStep = -3;
                    fnReady();
                    break;
                case 68:
                    oRole.innerHTML = `<img src="images/${aKlist[1].img}.gif">`;
                    dStep = 3;
                    fnReady();
                    break;
                case 83:
                    oRole.innerHTML = `<img src="images/${aKlist[2].img}.gif">`;
                    dStep = 0;
                    fnReady();
                    break;
                case 87:
                    oRole.innerHTML = `<img src="images/${aKlist[3].img}.gif?${num}">`;
                    setTimeout(fnReady,1000);
                    break;
                case 74:
                    oRole.innerHTML = `<img src="images/${aKlist[4].img}.gif?${num}">`;
                    fnReady();
                    break;
            }
            if(aKinput[1]>0){
                if(aKinput[0] === aSkill[3].kCode[0] && aKinput[1] === aSkill[3].kCode[1]){
                    oRole.innerHTML = `<img src="images/${aSkill[3].img}.gif">`;
                    dStep = 7;
                    fnSready();
                    fnClear();
                }else if(aKinput[0] === aSkill[4].kCode[0] && aKinput[1] === aSkill[4].kCode[1]){
                    oRole.innerHTML = `<img src="images/${aSkill[4].img}.gif?${num}">`;
                    dStep = -6;
                    fnSready();
                    fnClear();
                }else if(aKinput[0] === aSkill[2].kCode[0] && aKinput[1] === aSkill[2].kCode[1] && aKinput[2] === aSkill[2].kCode[2] && aKinput[3] === aSkill[2].kCode[3] && aKinput[4] === aSkill[2].kCode[4]){
					ready = false;
                    oRole.innerHTML = `<img src="images/${aSkill[2].img}.gif?${num}">`;
                    setTimeout(fnStand,2000);
                    setTimeout(fnReady,2000);
                    fnClear();
                }else if(aKinput[0] === aSkill[1].kCode[0] && aKinput[1] === aSkill[1].kCode[1] && aKinput[2] === aSkill[1].kCode[2]){
                    ready = false;
                    oRole.innerHTML = `<img src="images/${aSkill[1].img}.gif?${num}">`;
                    setTimeout(fnStand,1000);
                    setTimeout(fnReady,1000);
                    fnClear();
                }else if(aKinput[0] === aSkill[0].kCode[0] && aKinput[1] === aSkill[0].kCode[1]){
                    ready = false;
                    oRole.innerHTML = `<img src="images/${aSkill[0].img}.gif?${num}">`;
                    setTimeout(fnStand,1000);
                    setTimeout(fnReady,1000);
                    fnClear();
                }else{
                    fnSready();
                    fnReady();
                }
            }else{
                fnSready();
            }
	    }
    }
	
    function fnKeyUp(e){
        e = e || window.event;
        aKcodeS[e.keyCode] = false;
        if(e.keyCode === 65 || e.keyCode === 68){
            dStep = 0;
        }
        if(sReady){
	        if(e.keyCode === 87){
	            fnDelay();
                setTimeout(fnReady,1000);
	        }else{
	            fnStand();
	        }
	        setTimeout(function(){
                fnClear();
	        },1200);
            sReady = false;
        }
    }
    
	function fnReady(){
        ready = true;
	}
    function fnSready(){
        sReady = true;
    }
    function fnClear(){
        aKinput = [];
    }
    function fnDelay(){
        setTimeout(fnStand,800);
    }
    function fnStand() {
        oRole.innerHTML = `<img src="images/k0.gif">`;
    }
	(function fnMove(){
        dRole = parseFloat(oRole.style.left);
        if(dRole>=0 && dRole<=600){
	        oRole.style.left = dRole + dStep +'px';
        }else if(dRole<0){
            oRole.style.left = '0';
            dStep = 0;
        }else{
            oRole.style.left = '600px';
            dStep = 0;
        }
        requestAnimationFrame(fnMove);
    })();
</script>
</html>